<template>
	<div class="invitation-card-box">
		<img class="locadingGif" v-if="isLoading" src="../../assets/images/loading.gif" />
		<div v-if= "isBack"  @click="clickBack" class="back-btn"></div>
		<compoenent :is = 'comPatternNum' @msgParent = 'callBackChild'  :postImg = 'backImgBase'  :txBase = 'txBase'  :correct='correct'></compoenent>
		<div class="footer" :class="[ruAnimate]">
			<p class="title">{{footerTitle}}</p>
			<div class="footer-connect-box">
				<div class="temImg tem1" v-for="(v,index) of navImg" @click="changeTemplate(index)" :key="index">
					<img :src="v" />
					<div class="correct-box" v-if="correct==index?'correct':''"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	require('jr-qrcode');
	import comPattern1 from "./comPattern1";//直播间 
	import comPattern2 from "./comPattern2";//回看
	export default {
		components: {
			comPattern1,
			comPattern2
		},
		data() {
			return {
				isLoading:false,
				comPatternNum:'',
				backImgBase: '',
				txBase: '',
				footerTitle: "",
				ruAnimate: "cardShowAnimate",
				navImg: [],
				correct: 0,
                isBack:false,
			}
		},
		created: function() {
			this.isLoading = true
			this.comPatternNum = 'comPattern1'
			//console.log(this.$route.query.wxPic.includes('gd_mr'))
			if(this.$route.query.page=='lookBackPage'){//回看
				for (let i=1;i<5;i++) {
					this.navImg.push(require('../../assets/images/invitation/lookBgSmall'+i+'.png'))
				}
				this.comPatternNum = 'comPattern2';
			}else{
				for (let i=1;i<10;i++) {
					this.navImg.push(require("../../assets/images/invitation/sample"+i+".png"))
				}
				this.comPatternNum = 'comPattern1';
			}
			this.getImgPosterBase64(decodeURIComponent(this.$route.query.preImg), 'back');
			if(this.$route.query.wxPic.includes('gd_mr')){//游客容错
				this.txBase  = require('../../assets/images/gd_mr.png')
			}else{
				this.getImgPosterBase64(decodeURIComponent(this.$route.query.wxPic),'tx');
			}
			this.$store.dispatch('hideNav')
			this.isWXApp()
			if(this.$channel=='gsyh'){
				this.isBack = true
			}
		},
		mounted: function() {
			this.$store.dispatch('hideNav');
		},
		watch: {
		},
		computed: {
			nickname() {
				return this.$store.state.userInfo.nickname
			}
		},
		methods: {
			clickBack(){
				this.$router.go(-1)
			},
			callBackChild(data){
				switch (data.type){
					case 'closeLoading':
					this.isLoading = false;
						break;
					case 'closeSlide':
					this.base64ImgClick();
						break;
					default:
						break;
				}
			},
			changeTemplate(index) {
				if( this.correct != index){
					this.isLoading = true
                    this.correct = index;
				}
				
			},
			// 本地将url转成base64格式
			getImgPosterBase64(url,source) {
				let _this = this;
				window.fun.getBase64(url,function(res){
					if(source === "back"){
						_this.backImgBase= res; // 将结果赋值给需要用的变量属性
					}else{
						_this.txBase = res;
					}
				})
			},	
			// getImgPosterBase64(url1, source) {
			// 	let _this = this;
			// 	_this.$http.get("/h5live/imgEncode?url=" + url1).then(
			// 		res => {
			// 			var posterBase64 = "data:image/jpeg;base64," + res.data.data;
			// 			if(source == 'back') {
			// 				_this.backImgBase = posterBase64
			// 			} else {
			// 				_this.txBase = posterBase64
			// 			}
			// 		},
			// 		err => {
			// 			console.log(err);
			// 		}
			// 	);
			// },
			isWXApp() {
				var ua = navigator.userAgent.toLowerCase();
				if((/MicroMessenger/i).test(ua)) {
					this.footerTitle = "长按上方图片保存邀请卡 邀请好友来看直播吧~"
				} else { 
					this.footerTitle = "手机截屏上方完整图片，邀请好友来看直播吧"
				}
			},
			base64ImgClick() {
				if(this.ruAnimate == "cardHideAnimate") {
					this.ruAnimate = "cardShowAnimate"
				} else {
					this.ruAnimate = "cardHideAnimate"
				}
			},
		}
	}
</script>

<style scoped>
	.back-btn{
		width: 50px;
		height: 50px;
		background: url(../../assets/images/iconsmall.png);
		background-size: 150px 150px;
		background-position: 10px 10px;
		position: absolute;
		top: 20px;
		left: 30px;
		z-index: 100;
	}
	.locadingGif {
		position: absolute;
		top: 500px;
		left: 350px;
		z-index: 100;
	}
	
	.cardHideAnimate {
		z-index: 2;
		animation: cardHide 0.5s ease-out 1 forwards;
	}
	
	@keyframes cardHide {
		0% {
			transform: translateY(-210px);
		}
		100% {
			transform: translateY(0px);
		}
	}
	
	.cardShowAnimate {
		z-index: 2;
		animation: cardShow 0.5s ease-out 1 forwards;
	}
	
	@keyframes cardShow {
		0% {
			transform: translateY(0px);
		}
		100% {
			transform: translateY(-210px);
		}
	}
	
	.invitation-card-box {
		/*width: 100vw;
		height: 100vh;*/
		width: 750px;
		height: 1334px;
		background: white;
	}
	
	.canvas-box {
		width: 750px;
		height: 1334px;
		margin: 0 auto;
		background: white;
		display: none;
	}
	
	.footer {
		width: 750px;
		height: 210px;
		background: white;
		position: fixed;
		left: 0;
		bottom: -210px;
		box-shadow: -5px -5px 30px #616168;
	}
	
	.footer-connect-box {
		width: 750px;
		height: 150px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		white-space: nowrap;
		overflow-x: scroll;
	}
	
	.footer-connect-box .temImg {
		width: 126px;
		height: 126px;
		background-size: 126px 126px;
		position: absolute;
		flex-shrink: 0
	}
	
	.footer .title {
		width: 750px;
		height: 60px;
		background: #f3f3f3;
		text-align: center;
		line-height: 60px;
		font-size: 26px;
		color: #585858;
	}
	
	.dataUrl {
		width: 750px;
		height: 1334px;
		position: relative;
		z-index: 1;
	}
	
	.footer img {
		width: 100%;
		height: 100%;
	}
	
	.footer .temImg {
		position: relative;
		margin-left: 15px;
	}
	.correct-box {
		width: 126px;
		height: 126px;
		background: url(../../assets/images/YQ-btn.png) no-repeat center center;
		background-size: 42px 42px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
</style>